import { RootState } from '@/interface/store'
import { userlog } from '@/interface/user'
import { getUserLog } from '@/store/actions/user'
import { Table } from 'antd'
import { useLayoutEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

export const UserLog = () => {

  const dispatch = useDispatch()
  useLayoutEffect(() => {
    // 获取用户日志
    dispatch(getUserLog())
  }, [])
  const userlogArray = useSelector((state: RootState) => state.user.userLog as userlog);
  const columns = [
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '详情',
      dataIndex: 'info',
      key: 'info',
    },
    {
      title: 'IP',
      key: 'ip',
      dataIndex: 'ip',
    },
    {
      title: '地址',
      key: 'region',
      dataIndex: 'region',
    },
  ]

  //@ts-ignore
  return <Table columns={columns} dataSource={userlogArray} loading={userlogArray === ''}></Table>
}
